/*
  学习目标：this指向不正确的处理方式
    1. ✅React自带结构体, this指向正确, this指向组件实例对象;
    2. ❌React非自带结构体中, this指向undefined, this指向不正确, 需要特殊处理
      原理: 通过箭头函数, 自动绑定所处环境中的this
      2.1 👍在组件内, 使用箭头函数声明方法
      2.2 🔔在render方法体内, 提示箭头函数绑定this
      2.3 👎通过bind改变this指向- 了解即可
*/

import React from 'react';

export default class App extends React.Component {
  state = {
    count: 100,
  };

  // 2.1 👍在组件内, 使用箭头函数定义方法
  handleAdd2 = () => {
    console.log('this  ----->  ', this);
  };

  // React非自带结构体中, this指向不正确, this指向undefined, 需要特殊处理
  handleAdd() {
    console.log('handleAdd this  ----->  ', this);
  }

  handleAdd3() {
    console.log('this  ----->  ', this);
  }

  // render 和生命周期钩子函数 都是自带结构体
  render() {
    console.log('this  ----->  ', this);
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button
          // 2.2 👍在render方法体内, 提示箭头函数绑定this
          onClick={() => this.handleAdd()}
        >
          点我修改count
        </button>

        <button onClick={this.handleAdd2}>点我修改count2</button>
        {/* 👎ES6之前的老写法, 认识即可 */}
        {/* 2.3 👎通过bind改变this指向- 了解即可 */}
        <button onClick={this.handleAdd3.bind(this)}>点我修改count3</button>
      </div>
    );
  }
}
